<template>
  <div>
    <!-- <el-button text @click="dialogVisible = true">Click to open Dialog</el-button> -->

    <el-dialog v-model="dialogVisible" draggable :before-close="dialogBeforeClose" width="70%">
      <template #header>
        <div class="my-header">{{ state.title }}</div>
      </template>
      <div class="content-main">
        <el-tabs type="border-card" class="demo-tabs">
          <el-tab-pane>
            <template #label>
              <span class="custom-tabs-label">
                <el-icon>
                  <Histogram />
                </el-icon>
                <span>计算成果信息</span>
              </span>
            </template>
            <MapResultInfo :objInfo="state" />
          </el-tab-pane>
          <el-tab-pane>
            <template #label>
              <span class="custom-tabs-label">
                <el-icon>
                  <InfoFilled />
                </el-icon>
                <span>基础配置信息</span>
              </span>
            </template>
            <MapBaseInfo />
          </el-tab-pane>
        </el-tabs>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <!-- <el-button @click="dialogVisible = false">取消</el-button> -->
          <el-button type="primary" @click="dialogBeforeClose">关闭</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import MapResultInfo from './cpns/mapResultInfo/index.vue'
import MapBaseInfo from './cpns/mapBaseInfo/index.vue'
const resultInfoRef = ref(null)
const dialogVisible = ref(false)
const state = reactive({
  title: '水库站点'
})
defineExpose({ openMapSk })
const emit = defineEmits(['dialogClose'])
function openMapSk(val) {
  dialogVisible.value = true
  state.title = val.blknm
  //
  state.blkcd = val.blkcd
  // 判断河系还是区域
  state.schemeType = val.schemeType
  // 如果方案id存在
  if (val['scid']) {
    state.scid = val.scid
    state.ccid = ''
  } else {
    // 如果场次id存在
    state.ccid = val.ccid
    state.scid = ''
  }
}
function dialogBeforeClose() {
  dialogVisible.value = false
  emit('dialogClose')
}
</script>
<style  lang="less">
.my-header {
  height: 30px;
  border-bottom: 1px solid grey;
}
.content-main {
  height: 500px;
  // .demo-tabs > .el-tabs__content {
  //   // padding: 32px;
  //   color: #6b778c;
  //   font-size: 32px;
  //   font-weight: 600;
  // }
  .demo-tabs {
    height: 100%;
    .el-tabs__content {
      height: calc(100% - 50px);
      .el-tab-pane {
        height: 100%;
      }
    }
  }
  .demo-tabs .custom-tabs-label .el-icon {
    vertical-align: middle;
  }
  .demo-tabs .custom-tabs-label span {
    vertical-align: middle;
    margin-left: 4px;
  }
}
</style>
